<template name="kf">
	<view class="kf">
		<scroll-view  id="scrollview"  :style="{height: bodyHeight + 'px'}" scroll-with-animation="true" scroll-y="true"  :scroll-top="sctop" class='scrollview'>
			<view class="messageList" id="messageList">
				<view class="messageItem ">
					您好！我是星城客服，请问有什么可以帮助您？
				</view>
				<view class="guess">
					<view class="title "><image src="../../../static/myIcon/question.png"></image>猜你想问</view>
					<ul class="questionList">
						<li class="questionItem" v-for="(item,index) in questionList" :key="index" @click="putClick(item)">
							<text class="circle_icon"></text>{{item.title}}
						</li>
					</ul>
					<view class="kfText">以上没有解决我的问题</view>
					<button class="kfBtn" open-type="contact" session-from="sessionFrom">人工客服</button>
				</view>
				<view  v-for="(item,index) in allList" :key="index">
					<view class="right-message">
						<view class=" messageItem userMessage" v-if="item.sendText">
							{{item.sendText}}
						</view>
					</view>
					<view class="left-message">
						<view class="messageItem getMessage" v-if="item.getText">
							{{item.getText}}
						</view>
					</view>
					
				</view>
			</view>
		</scroll-view>
		<view class="putDev">
			<view class="f24 bcolor bottom-send">
				<iInput v-model="question" type="text" class=" send-input" placeholder-style="color: #999" placeholder="请输入咨询问题"></iInput>
				<image class="tel" src="https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/myIcon/tel.png" @click="goPhoneBtn('4008718776')"></image>
				<view class="send-btn"   @click="sendTextClick">发送</view>
			</view>
		</view>
	</view>
</template>

<script>
	import iInput from '@/components/watch-login/info-input.vue'; //input
	export default {
		components: {
			iInput
		},
		data() {
			return {
				sctop:0,
				bodyHeight:1,
				customStyle:{
					backgroundColor:"#F6F6F6",
					height:'72rpx',
					padding:'0 24px 0 24rpx',
					borderRadius:'8rpx'
				},
				question:"",
				allList:[],
				sendText:'',
				getText:'',
				questionList:[
					{
						title:"如何做兼职？"
					},{
						title:"兼职是否安全？"
					},{
						title:"我是商家，怎么发布招聘信息？"
					},{
						title:"未成年是否可以做兼职？"
					},{
						title:"怎么成为推广者？"
					},{
						title:"如何成为区域代理？"
					},{
						title:"商家发布的信息与实际不符怎么办？"
					},
				]
			};
		},
		mounted() {
			let that = this;
			uni.getSystemInfo({
			    success: function (res) {
			        // console.log(res.windowWidth);
			        // console.log(res.windowHeight);
					that.bodyHeight = res.windowHeight
			    }
			});
		},
		created() {
			this.getShowInit()
		},
		methods: {
			async getShowInit(){ //获取问题列表
				uni.showLoading({
					title: '加载中...'
				});
				let query={
					current:1,
					number:10
				}
				let res = await this.$apis.serverMsgList(query);
				if(res){
					this.questionList=res;
				}
			},
			async putClick(item){ //点击问题获取问题答案
				this.sendText = item.title
				this.$nextTick(function(){
					this.scrollToBottom();
				})
				uni.showLoading({
					title: '加载中...'
				});
				let res = await this.$apis.getIdServerMsg({id:item.id});
				uni.hideLoading();
				if(res){
					this.getText = res.content
					this.allList.push({sendText:this.sendText,getText:this.getText})
					this.$nextTick(function(){
						this.scrollToBottom();
					})
				}
				// this.$api('kefu.autoResponse',{
				// 	type:item.id
				// }).then(res => {
				// 	uni.hideLoading();
				// 	if(res.code==0){
				// 		this.getText = res.data 
				// 		this.allList.push({sendText:this.sendText,getText:this.getText})
				// 		this.$nextTick(function(){
				// 			this.scrollToBottom();
				// 		})
				// 		console.log("this.allList",this.allList)
				// 	}
				// })
			},
			sendTextClick(){
				if(this.question==''){
					uni.showToast({ title: '请输入咨询问题', icon: 'none' });
					return false;
				}
				this.allList.push({sendText:this.question})
				this.question = ''
				this.$nextTick(function(){
					this.scrollToBottom();
				})
			},
			scrollToBottom() { //滚动条底部
				let that = this
				let query = uni.createSelectorQuery()
				query.select('#scrollview').boundingClientRect()
				query.select('#messageList').boundingClientRect()
				query.exec((res) => {
					// console.log(res)
					console.log(res)
					//获取所有内部子元素的高度
					//判断子元素高度是否大于显示高度
					that.sctop = res[1].height +res[0].height
				})
			},
			goPhoneBtn(val) {
				uni.makePhoneCall({
					// 手机号
					phoneNumber: val,
					// 成功回调
					success: (res) => {
					},
					// 失败回调
					fail: (res) => {
					}
				});
			},
		}
	}
</script>

<style lang="scss">
.kf{
	// ::-webkit-scrollbar {
	// 	display: none;
	// 	width: 0 !important;
	// 	height: 0 !important;
	// 	-webkit-appearance: none;
	// 	background: transparent;
	// }
	.scrollview{
		//padding-bottom:322rpx;
	}
	.putDev{
		position: fixed;
		bottom:0;
		width:92%;
		height:126rpx;
		background-color: white;
		padding:32rpx 4%;
		.ipt{
			background-color: #F6F6F6;
		}
		.bottom-send{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.send-input{
				flex: 1;
				background-color: #eee;
			}
			.send-btn{
				width: 112rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: $main-color;
				color: #fff;
				text-align: center;
				border-radius: 8rpx;
				&:active{
					opacity: 0.68;
				}
			}
			.tel{
				width: 48rpx;
				height: 48rpx;
				margin: 0 32rpx;
			}
		}
	}
	.messageList{
		padding: 0 30rpx 30rpx 30rpx;
		padding-bottom:362rpx;
		.right-message{
			text-align: right;
		}
		.left-message{
			text-align: left;
		}
		.messageItem{
			line-height: 56rpx;
			background-color: white;
			padding:12rpx 24rpx;
			width: 80%;
			border-radius: 8rpx;
			margin-top:30rpx;
			margin-bottom:32rpx;
		}
		.kfBtn{
			background-color: $main-color;
			    width: 180rpx;
			    color: white;
			    font-size: 26rpx;
			    margin-left: 20rpx;
		}
		.kfText{
			line-height: 70rpx;
			    color: #666;
			    margin-left: 20rpx;
		}
		.userMessage{
			margin-left:20%;
			  
			color: #fff;
			width: auto;
			text-align: left;
			display: inline-block;
			background-color: rgba(95, 219, 126, 0.7);
		}
		.getMessage{
			width: auto;
			text-align: left;
			display: inline-block;
		}
		.guess{
			padding:26rpx 0 26rpx 0;
			width:100%;
			border-radius: 8rpx;
			background-color: white;
			.title{
				padding:0 32rpx 26rpx 32rpx;
				font-weight: bold;
				line-height: 56rpx;
				border-bottom:1rpx solid #E9E9E9;
				image{
					width:38rpx;
					height:38rpx;
					vertical-align: middle;
					margin:10rpx 32rpx 13rpx 0;
				}
			}
			.questionList{
				padding:32rpx;
				border-bottom:1rpx solid #E9E9E9;
				.questionItem{
					font-size: 28upx;
					color:#004F8B;
					line-height: 60rpx;
					&:active{
						opacity: 0.68;
					}
					.circle_icon{
						width: 8rpx;
						height: 8rpx;
						background: #004F8B;
						border-radius: 50%;
						display: inline-block;
						margin-right: 24rpx;
						vertical-align: middle;
					}
				}
			}
		}
	}
}
</style>
